<template>
  <div class="container">
    <div class="panel__top"></div>
    <div id="gjs">
      <!-- <h1>你好 Component!</h1> -->
    </div>
    <div id="blocks"></div>
  </div>
</template>

<script>
import { initializeGrapesJS } from '../services/grapesjsService';

export default {
  name: 'Editor',
  mounted() {
    // 确保在所有 DOM 元素渲染完成后再初始化 GrapesJS
    this.$nextTick(() => {
      this.editor = initializeGrapesJS('gjs', 'blocks', 'panel-top');
    });
  },
};
</script>

<style>
/* 样式可以根据需要进行调整 */
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin-bottom: 5px;
}
#blocks {
  flex: 1;
  overflow: auto;
}
</style>
